<template lang="html">
<div class="me">
    <div class="page-head semibold">
      <span class="me">导航</span>
    </div>
    <div class="content">
        <div class="title">个人设置</div>
        <div class="nav-group">
            <template v-if="islogin == 0">
            <router-link :to="'/main/login'" class="nav">
                <span class="word">登录</span></i><span class="go"></span>
            </router-link>
            <router-link :to="'/main/register'" class="nav">
                <span class="word">注册</span></i><span class="go"></span>
            </router-link>
            </template>
            <template v-if="islogin == 1">
            <a @click="logout()" class="nav">
                <span class="word">注销</span></i><span class="go"></span>
            </a>
            </template>
        </div>
        <template v-for="linkcate in linkcates">
        <div class="title">{{linkcate.name}}</div>
        <div class="nav-group">
            <a v-for="link in links" v-if="link.category._id == linkcate._id" :href="link.url" target="_blank" class="nav">
                <span class="word">{{link.name}}</span></i><span class="go"></span>
            </a>
        </div>
        </template>
    </div>
</div>
</template>
<style lang="postcss">
.page-head{
  .me{
    padding-left: 0rem;
  }
}
.content{
    background-color: #f1f3f5;
    padding: 0.05rem 0 0.45rem;
    .title{
        text-align: center;
        margin: 0.06rem;
        font-size: 0.14rem;
        color: #A5A5A5;
    }
    .nav-group{
        display: block;
        background-color: #fff;
        margin: 0 0 0.05rem 0;
        .nav{
            position: relative;
            font-size: 0.14rem;
            border-bottom: 0.005rem solid #E2E4E6;
            display: block;
            margin-left: 0.51rem;
            line-height: 0.45rem;
            .switch{
                display: inline-block;
                position: absolute;
                top: 0.15rem;
                right: 0.15rem;
                width: 0.255rem;
                height: 0.155rem;
                border-radius: 0.09rem;
                background: #A5A5A5;
                .buttom{
                    display: inline-block;
                    width: 0.14rem;
                    height: 0.14rem;
                    position: absolute;
                    top:0.005rem;
                    right:-0.005rem;
                    background: #FFFFFF;
                    border: 0 solid #E5E5E5;
                    box-shadow: 0 0.01rem 0.01rem 0 rgba(0,0,0,0.50);
                    border-radius: 50%;
                }
            }
            .switched{
                background: #03e59b;
                .buttom{
                    left:-0.005rem;
                }
            }
            .dot{
                display: inline-block;
                width: 0.05rem;
                height: 0.05rem;
                background-color: #FF0202;
                border-radius: 50%;
                margin: 0 0 0.07rem 0.01rem;
            }
            .text{
                position: absolute;
                right: 0.15rem;
                display: inline;
                color: #A5A5A5;
            }
            .go{
                position: absolute;;
                top: 0.145rem;
                right: 0.15rem;
                width: 0.16rem;
                height: 0.16rem;
                transform: rotate(180deg);
                display: inline-block;
                overflow: hidden;
                background: url("../../static/4_icon_back.png") no-repeat center;
                background-size: 100%;
            }
            .go:after{
                content: "";
                display: block;
                height: 100%;
                transform: translateX(-100%);
                background: inherit;
                filter: drop-shadow(0.16rem 0 0 #A5A5A5);
            }
        }
        .nav:last-child{
            border-bottom: none;
        }
    }
}
.head-img{
    background-color: #fff;
    position: relative;
    background: url("../../static/22_img_login.png") no-repeat top;
    background-size: 100%;
    height: 3rem;
    width: 100%;
    .avatar {
        position: absolute;
        width: 0.6rem;
        top: 0.4rem;
        left: 1.575rem;
    }
    .collection {
        position: absolute;
        top: 2.075rem;
        left: 50%;
        transform: translate(-50%);
        text-align: center;
        background-color: #fff;
        margin-bottom: 0.05rem;
        line-height: 0.12rem;
        .icon{
            width: 0.55rem;
        }
        .word{
            margin-top:0;
            padding-top:0.05rem;
            font-size: 0.12rem;
        }
    }
}
</style>
<script>
import store from '../store'
export default {
    name: 'me',
  data: function(){
    return {
      show: true,
      links: [],
      linkcates: []
    }
  },
  computed: {
    islogin () {
      return store.state.islogin
    }
  },
  components: {
  },
  mounted: function() {
        this.$http.get('/linkcates')
            .then((response) => {
                if(response.data.code == 1){
                    this.linkcates = response.data.msg;
                    this.$http.get('/links')
                        .then((res) => {
                            if(res.data.code == 1){
                                this.links = res.data.msg;
                            }else{
                                alert(res.data.msg);
                            }
                        })
                        .catch((err) => {
                            alert(err);
                        })
                        ;
                }else{
                    alert(response.data.msg);
                }
            })
            .catch((err) => {
                alert(err);
            })
            ;
  },
  methods: {
    logout: function(){
        this.$http.get('/auth/logout')
            .then((response) => {
                if(response.data.code == 1){
                    store.commit('LOGOUT');
                    this.$router.push('/')
                }else{
                    alert(response.data.msg);
                }
            })
            .catch((err) => {
                alert(err);
            })
            ;
    }
  }
}
</script>